<template>
    <div class="app-container">
       工作日管理
    </div>
</template>

<script>

export default {
    data() {
        return {
            // 查询参数
            queryParams: {
                year: ''
            },
            // 当前显示年份数据
            yearList: [],
        };
    },
    created() {
        this.queryParams.year = String(new Date().getFullYear())

    },
    mounted() {
        this.initYearList()
        this.$nextTick(() => {
            const hiddenCells = document.querySelectorAll('.el-calendar-table__row .prev, .el-calendar-table__row .next');
            hiddenCells.forEach(cell => {
                cell.style.pointerEvents = 'none';
                cell.querySelector(".el-calendar-day").style.visibility = 'hidden';
            });
        });
    },
    methods: {
        // 点击搜索
        handleQuery() {
            this.year = this.queryParams.year
            this.initYearList()
        },
        // 初始化年列表
        initYearList() {
            this.yearList = []
            const year = this.queryParams.year
            for (let i = 1; i <= 12; i++) {
                const month = i < 10 ? ('0' + i) : i
                this.yearList.push({
                    date: year + '-' + month
                })
            }
        },
        handleDateClick(date, data) {
            console.log('Clicked date:', date);
            console.log('Date data:', data);
            // 在这里处理点击事件的逻辑
        },
        dateType(date) {
            return this.isWorkday(date) ? '工作日' : '非工作日'
        },
        isWorkday(date) {
            const day = date.getDay();
            return day >= 1 && day <= 5;
        }
    },
};
</script>
<style scoped lang="scss">
.container {
    .item {
        width: 50%;
        display: inline-block;
        padding: 20px;

        ::v-deep .el-calendar {
            .el-calendar__button-group {
                display: none;
            }

            .el-calendar-day {
                position: relative;
                color: #858585;
            }

            .date-type {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 100%;
                text-align: center;
                height: 100%;
                line-height: 85px;
            }

            .workday {
                color: #3572f0;
            }
        }
    }
}
</style>